import React, { useState } from 'react'
import styles from './sliderBox.less'
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import { intVal } from '../utils'
export default () => {

    const [offsetPx, setOffsetPx] = useState('0px')
    return (

        <div className={styles.sliderBox}>
            <div className={styles.boxList}>
                <ul style={{ transform: `translateX(${offsetPx})` }}>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c4bdbabe1a232469eea43c1824990d3.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                99元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bc471c7b099b95f470a210b29d6aa2b.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                99元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c4bdbabe1a232469eea43c1824990d3.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                99元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bc471c7b099b95f470a210b29d6aa2b.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                99元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c4bdbabe1a232469eea43c1824990d3.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                222299元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bc471c7b099b95f470a210b29d6aa2b.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                6666699元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c4bdbabe1a232469eea43c1824990d3.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                99元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bc471c7b099b95f470a210b29d6aa2b.jpg?thumb=1&amp;w=200&amp;h=200&amp;f=webp&amp;q=90" />
                            <div className={styles.name}>最生活毛巾·Air（10条装） 素蓝sdsadsdsdsadasdsd </div>
                            <p className={styles.desc}>给生活一条好毛巾</p>
                            <div className={styles.price}>
                                99元
                            <del>169元</del>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div className={styles.leftRight}>
                <span className={styles.leftArrow} onClick={() => {
                    let num = offsetPx.replace("px", "")
                    const result = parseInt(num) + 978
                    setOffsetPx(result + "px")
                }}><LeftOutlined /></span>
                <span className={styles.rightArrow} onClick={() => {
                    let num = offsetPx.replace("px", "")
                    const result = parseInt(num) - 978
                    setOffsetPx(result + "px")
                }}><RightOutlined /></span>
            </div>
        </div>

    )
}